<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			min-height: 400px;
			border: 1px solid #ccc;
		}
		/*.sldiv{
			width: 200px;
		}*/
	</style>
</head>
<body>
	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriendss"></span></p>
	</div>

	<div class="sldiv">
		省 <select id="province"><option>广西</option></select>
		市 <select id="city"><option>柳州</option></select>
		区 <select id="area"><option>柳江区</option></select>
	</div>
	

	<script type="text/javascript" src="js/jquery3.js"></script>

	<script type="text/javascript">
		$.get('data/studet.json',function(res){
			$("#sname").text(res.name);
			$('#sage').text(res.age);

			var fname="";
			for(var i=0; i<res.friends.length;i++){
				fname+=res.friends[i].name+"";
			}
			console.log('sent friends');
			$('#sfriendss').text(fname);
		})

		$.get('data/province.json',function(res){
			$("#province").empty();
			for(var i=0; i<res.length;i++){
				var p=res[i];
				var option="<option>"+p.name+"</option>";
				$("#province").append(option);
			}
			console.log('sent res');
		})

		$.get('data/city.json',function(res){
			$("#city").empty();
			for(var i=0; i<res.length;i++){
				var p=res[i];
				var option="<option>"+p.name+"</option>";
				$("#city").append(option);
			}
		})

		$.get('data/area.json',function(res){
			$("#area").empty();
			for(var i=0; i<res.length;i++){
				var p=res[i];
				var option="<option>"+p.name+"</option>";
				$("#area").append(option);
			}
		})

		// $("#province").change(function(){
		// 	console.log($(this).val());
		// })
		$("#city").change(function(){
			var cid = $(this).val();

			var tmp=[];

			$.get('data/city.json',function(res){

				for(var i=0; i<res.length;i++){
					if (res[i].pid==cid) {
					console.log(res[i]);
					tmp.push(res[i]);
					}
				}
			})

			$("#area").empty();

			for(var j=0;j<tmp.ltngth;j++){
				var option="<option>"+tmp[j].name+"</option>";
				$('#area').append(option);
			}


			
		})





		
	</script>
</body>
</html>